<template>
  <div class="customer-detail" v-if="!shareData.loading">
    <form-view :fields="fields" :value="value" class="bbx-cell-form-view" :form-cell-count="formCellCount">
      <div slot="name"></div>
      <!-- start 客户负责人 -->
      <template slot="manager" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">
            <span v-user="value.customerManager" class="user-card-triggle">
              <template v-if="isOpenData">
                <open-data type="userName" :openid="value.customerManagerStaffId"></open-data>
              </template>
              <template v-else>
                {{ value.customerManagerName }}
              </template>
            </span>
          </div>
        </div>
      </template>
      <!-- end 客户负责人 -->

      <!-- start 协同人 -->
      <template slot="synergies" slot-scope="{ field, value }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content">
            <template v-if="isOpenData && value">
              <span v-for="item in value" v-user="item.userId" :key="item.userId" class="user-card-triggle">
                <open-data type="userName" :openid="item.staffId"></open-data>
              </span>
            </template>
            <template v-else>
              <span class="synergies-name user-card-triggle" v-for="item in value" :key="item.userId" v-user="item.userId">{{ item.displayName }}</span>
            </template>
            <template v-if="allowEditSynergies">
              <el-tooltip class="item" effect="dark" :content="$t('customer.detail.customerDetailFormView.modifySynergiesTooltip')" placement="top">
                <i class="iconfont icon-bianji1" @click="modifySynergies"></i>
              </el-tooltip>
            </template>
          </div>
        </div>
      </template>
      <!-- end 协同人 -->

      <!-- start 创建人 -->
      <template slot="createLoginUser" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div v-if="value && value.createLoginUser" class="form-view-row-content">
            <span v-user="value.createLoginUser.userId" class="user-card-triggle">
              <template v-if="isOpenData">
                <open-data type="userName" :openid="value.createUserStaffId"></open-data>
              </template>
              <template v-else>
                {{ value.createLoginUser.displayName }}
              </template>
            </span>
          </div>
        </div>
      </template>
      <!-- end 创建人 -->

      <!-- start 上级客户 -->
      <template slot="parentCustomer" slot-scope="{ field }">
        <div class="form-view-row bbx-form-cell-item">
          <label>{{ field.displayName }}</label>
          <div class="form-view-row-content view-detail-btn" @click="openCustomerDetial(value.parentCustomer.customerId)">
            {{ value.parentCustomer ? value.parentCustomer.customerName : '' }}
          </div>
        </div>
      </template>
      <!-- end 上级客户 -->

    </form-view>
  </div>
</template>

<script>
import { isOpenData } from '@src/util/platform';
import * as CustomerApi from '@src/api/CustomerApi.ts'
import { BaseSelectUserModeEnum } from '@src/component/common/BaseSelectUser/model/enum'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { chooseExUser } from '@model/config/SelectUserConfig.ts'
import FormCellChange from '@src/component/compomentV2/FormCellChange'
import { openAccurateTab } from '@src/util/platform'

export default {
  name:'customer-detail',
  props:{
    shareData: {
      type: Object,
      default: () => ({})
    },
    allowEditSynergies: {
      type: Boolean,
      default: false
    },
    formCellCount: {
      type: Number,
      default: 1
    }
  },
  components:{FormCellChange},
  computed: {
    fields() {
      return this.shareData.fields 
    },
    value() {
      return this.shareData.customer 
    }
  },
  data() {
    return {
      isOpenData,
    }
  },
  methods: {
    /** 
    * @description 修改协同人
    */
    modifySynergies() {
      let options = {
        title: this.$t('customer.detail.customerDetailFormView.modifySynergiesTooltip'),
        selectedUsers: this.value?.synergies || [],
        max: 100,
        ...chooseExUser,
        mode: BaseSelectUserModeEnum.Filter
      };
      
      return this.$fast.select.multi.all(options).then(result => {
        if(result.status == 0) {
          let synergies = result?.data?.users || [];

          const params = { customerId: this.value.id, synergies }
          this.$emit('synergies-updated', synergies);
          CustomerApi.updateSynergies(params).then(res => {
            if (res.success) {
              this.$emit('synergies-updated', synergies);
            } else {
              this.$platform.alert(res.message);
            }
          }).catch(err => console.error(err))
        }
      }).catch(err => console.error(err))
    },
    async openCustomerDetial(customerId) {
      try {
        const res = await CustomerApi.customerCheckAuth({
          customerId,
          from: 'parentCustomer',
        })
        if (!res?.result?.check) {
          this.$message.error(this.$t("common.errorMap.code2008.title"));
          return;
        }
      } catch (error) {
        console.log(error);
        return;
      }
      let fromId = window.frameElement.getAttribute('id');
      openAccurateTab({
        type: PageRoutesTypeEnum.PageCustomerView,
        key: customerId,
        params: `noHistory=1`,
        fromId
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.customer-detail{
  ::v-deep .form-view {
    padding-bottom: 12px;
  }
  ::v-deep .form-view-row{
    padding: 6px 0 8px 12px !important;
  }
}

.synergies-name {
  margin-right: 12px;
}
</style>